<template>
    <view class="container">
        <!-- 搜索栏 -->
        <uni-search-bar @confirm="handleSearch" placeholder="请输入商品名称"></uni-search-bar>

        <!-- 商品列表 -->
        <uni-list>
            <uni-list-item v-for="item in goods" :key="item.id" :title="item.name"
                :note="`分类：${categoryToChinese(item.productCategory)} | 库存：${item.stockQuantity}`" :thumb="item.image" clickable
                @click="handleEdit(item.id)">
                <template v-slot:footer>
                    <text class="price">￥{{ item.price }}</text>
                </template>
            </uni-list-item>
        </uni-list>
        <template v-if="goods.length===0"><view style="text-align: center;">暂无数据</view></template>
        <!-- 添加按钮 -->
        <view class="add-button" @click="showAddForm">
            <uni-icons type="plusempty" size="30" color="#fff"></uni-icons>
        </view>

        
    </view>
</template>

<script>
    import {
        getProducts
    } from '../apis/product'
    import {
        isLogin
    } from '../tools/tools'
    export default {
        data() {
            return {
                goods: [], // 商品列表
                searchText: '', // 搜索内容
                formData: { // 表单数据
                    id: '',
                    name: '',
                    price: 0,
                    stock: 0,
                    category: '',
                    image: ''
                },
                pagination:{
                    page:1,
                    limit:10,
                    key:""
                },
                total:0,
            }
        },
        computed: {
            // 过滤后的商品列表
            filteredGoods() {
                return this.goods.filter(item =>
                    item.name.includes(this.searchText))
            }
        },
        methods: {
            categoryToChinese(category){
                switch(category){
                    case "sys_car_supplies":
                    return "会员用品"
                    case "car_services":
                    return "会员服务"
                    case "sys_vip_packages":
                    return "会员套餐"
                    default:
                    return "无"
                }
            },
            // 搜索处理
            handleSearch(e) {
                this.searchText = e.value
            },

            // 显示添加表单
            showAddForm() {
                uni.navigateTo({
                	url: '/pages/product/addProduct'
                })
            },


            // 编辑商品
            handleEdit(id) {
				uni.navigateTo({
				  url: `/pages/product/productxx?id=${id}`
				})
            },

        },
        mounted: async function() {
            const res = await getProducts({...this.pagination,total:this.total});
            if (res.code >= 0) {
                this.goods = res.data.data;
            }
        },
        onShow: async () => {
            isLogin()
        }
    }
</script>

<style scoped>
    .container {
        padding: 20rpx;
    }

    .price {
        color: #e64340;
        font-weight: bold;
    }

    .actions {
        display: flex;
        gap: 20rpx;
    }

    .add-button {
        position: fixed;
        right: 40rpx;
        bottom: 100rpx;
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        background-color: #007AFF;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    }

    .form-container {
        background: #fff;
        padding: 30rpx;
        border-radius: 16rpx;
        width: 600rpx;
    }

    .form-title {
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 30rpx;
        text-align: center;
    }

    .form-buttons {
        margin-top: 40rpx;
        display: flex;
        justify-content: space-between;
    }

    .btn {
        flex: 1;
        margin: 0 20rpx;
    }

    .image-upload {
        width: 200rpx;
        height: 200rpx;
        border: 2rpx dashed #eee;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .preview-image {
        width: 100%;
        height: 100%;
        border-radius: 8rpx;
    }
</style>